<template>
  <el-row class="container">
    <el-row class="score-titel">
      <el-card class="title-card" style="margin: 10px 20px 5px 20px">
        <el-row type="flex">
          <el-col :span="20">
            <el-row>
              <el-col :span="20">
                <el-row :type="flex" justify="space-start">
                  <span class="title-text">{{ paperInfo.examName }}</span>
                  <span class="title-text"
                    >考试时间：{{ paperInfo.examTime }}</span
                  >
                  <span class="title-text"
                    >时长：{{ paperInfo.examDuration }} 分钟</span
                  >
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <span class="title-text"
              >试卷ID：
              <span style="font-size: 18px; color: #409eff">
                {{ paperInfo.paperId }}
              </span></span
            >
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row class="score-content">
      <!-- 左边问题列表 -->
      <el-col :span="5" class="question-col">
        <el-card style="height: 98%; margin: 5px 0px 5px 20px">
          <el-tabs type="border-card" style="height: 100%">
            <el-tab-pane label="主观题">
              <el-table
                :data="subjectivityQuestionlist"
                style="width: 100%"
                @row-click="subjectClick"
              >
                <el-table-column
                  prop="questionNo"
                  label="题号"
                  width="60"
                  align="left"
                >
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.questionNo
                    }}</span>
                    <i
                      :class="
                        scope.row.userAnswer !== '' ? 'el-icon-document' : ''
                      "
                      class="color-success"
                      style=""
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  prop="questionScore"
                  label="结果"
                  width="48"
                  align="center"
                />
                <el-table-column
                  prop="realScore"
                  label="得分"
                  align="center"
                /> </el-table
            ></el-tab-pane>
            <el-tab-pane label="客观题"
              ><el-table :data="objectivityQuestionlist" style="width: 100%">
                <el-table-column label="题号" width="60" align="left">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.questionNo
                    }}</span>
                    <i
                      :class="
                        scope.row.userAnswer == scope.row.standardAnswer
                          ? 'el-icon-check color-success main-icon'
                          : 'el-icon-close color-fail main-icon'
                      "
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="questionScore"
                  label="题分"
                  width="48"
                  align="center"
                />
                <el-table-column prop="realScore" label="得分" align="center" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <!-- 左边栏问题栏 -->
      <el-col :span="12" style="flex: 1" gutter="8" class="left">
        <el-card class="question-card">
          <el-image
            :src="questionImgUrl"
            :preview-src-list="srcList"
            style="width: 100%; height: 100%"
          />
        </el-card>
        <el-card class="answer-card">
          <el-tabs type="border-card" style="height: 100%">
            <el-tab-pane label="标准">
              <el-input
                :rows="2"
                v-model="standardAnswer"
                class="answer-input explain-text"
                type="textarea"
            /></el-tab-pane>
            <el-tab-pane label="学生答案"
              ><el-input
                :rows="2"
                v-model="userAnswer"
                class="answer-input explain-text"
                type="textarea"
            /></el-tab-pane>
          </el-tabs> </el-card
      ></el-col>
      <!-- 右边答案栏 -->
      <el-col :span="7" class="right">
        <el-card
          v-loading="loading"
          style="height: 100%"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)"
        >
          <el-row :gutter="30" class="answer-score" justify="space-between">
            <el-row type="flex" justify="space-between" align="middle">
              <el-col :span="10" class="tip-text">建议得分:</el-col>
              <el-col
                :span="8"
                style="color: rgb(30, 103, 187)"
                class="score-text"
              >
                {{ scoreGptAnswer.answerScore }}</el-col
              >
              <el-col :span="5" class="tip-text">分</el-col>
              <el-col :span="1" class="tip-text" />
            </el-row>
            <el-row type="flex" justify="space-between" align="middle">
              <el-col :span="10" class="tip-text">确认得分:</el-col>

              <el-col :span="1" class="tip-text"
                ><span class="el-icon-minus" @click="minusScore()"
              /></el-col>
              <el-col
                :span="5"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span class="score-text">{{ realScore }}</span>
                <span class="tip-text" style="position: relative; left: 10px"
                  >分</span
                ></el-col
              >
              <el-col :span="1" class="tip-text"
                ><span class="el-icon-plus" @click="addScore()"
              /></el-col>

              <el-col :span="1" class="tip-text" />
            </el-row>
            <el-row
              type="flex"
              justify="space-around"
              align="middle"
              class="btn-group"
            >
              <el-col :span="13" style="display: flex; justify-content: center">
                <el-button type="info" plain @click="beforQuestion"
                  >上一题</el-button
                >
                <el-button type="info" plain @click="nextQuestion"
                  >下一题</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="success" plain @click="submitScroe()"
                  >确认得分</el-button
                >
              </el-col>
            </el-row>
          </el-row>
          <el-row style="height: 56%">
            <el-input
              :rows="2"
              v-model="scoreGptAnswer.answerExplain"
              disabled
              class="answer-input explain-text"
              type="textarea"
            />
            <el-row type="flex" justify="center" style="height: 18%">
              <el-col
                :span="12"
                type="flex"
                justify="space-end"
                style="
                  display: flex;
                  flex-direction: column;
                  height: 100%;
                  justify-content: center;
                "
              >
                <el-button
                  type="danger"
                  plain
                  style="margin: 5px 0 5px 0"
                  @click="getGptScroe()"
                  >AI 评分</el-button
                >
              </el-col>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { getGptAnswer } from "@/api/score/score";

export default {
  data() {
    return {
      paperInfo: {
        paperId: 1587621704140427265,
        examType: "常规考试",
        examName: "语文第一单元测试卷",
        examTime: "2020-03-01",
        examDuration: 120,
        examStatus: 1,
      },
      subjectivityQuestionlist: [
        {
          questionId: 1587621704140427265,
          questionNo: 15,
          questionName: "节气判断",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "由“寒食后”可以判断中节气为清明至谷雨之间",
          userAnswer: "由“寒食后”可以判断中节气为立秋",
          questionScore: 10,
          realScore: 10,
          questionType: 4,
        },
        {
          questionId: 1587621704140427265,
          questionNo: 16,
          questionName: "写一份给图书管理者的建议信",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "写一份给图书管理者的建议信",
          userAnswer: `Dear sir or Madam,
                I am a student in this university who frequently comes to the library. Generally speaking, the services you offer here are quite good.
                However, I would like to propose some recommendations for you to make the library more user-friendly.
                To begin with, will you please prolong the time allowed for reading?
                Since many students have so many classes in the daytime that they can't come to the library.
                What's more, some of the books on the shelves are out of date. If you could be kind enough to provide us with some more recent publications such as the latest magazines, we would be grateful.
                I would like to extend my greatest appreciation if you are so kind as to take my suggestions into consideration.`,
          questionScore: 25,
          realScore: 0,
          questionType: 4,
        },
        {
          questionId: 1587621704140427265,
          questionNo: 15,
          questionName: "节气判断",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "由“寒食后”可以判断中节气为清明至谷雨之间",
          userAnswer: "",
          questionScore: 10,
          realScore: 10,
          questionType: 4,
        },
      ],
      objectivityQuestionlist: [
        {
          questionId: 1587622642838245378,
          questionNo: 5,
          questionName: "中国东北三省是指（）",
          questionContent: "中国东北三省是指（）",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "A",
          userAnswer: "A",
          questionScore: 5,
          realScore: 5,
          questionType: 1,
        },
        {
          questionId: 1587622643626774530,
          questionNo: 6,
          questionName: "世界上最长的山脉安第斯山脉",
          questionContent: "世界上最长的山脉是安第斯山脉",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "A",
          userAnswer: "",
          questionScore: 5,
          realScore: 0,
          questionType: 1,
        },
        {
          questionId: 1587622642762747906,
          questionNo: 7,
          questionName: "以下哪些是中国的特别行政区？",
          questionContent: "以下哪些是中国的特别行政区？",
          questionImgUrl: require("@/assets/temp/test-question-1.jpg"),
          standardAnswer: "A,C",
          userAnswer: "A,C",
          questionScore: 8,
          realScore: 8,
          questionType: 1,
        },
      ],
      loading: false,
      questionScore: 0,
      realScore: 0,
      standardAnswer: "",
      userAnswer: "",
      questionImgUrl: "",
      // AI评分结果
      scoreGptAnswer: {
        answerScore: 0,
        answerExplain: "",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.standardAnswer = this.subjectivityQuestionlist[0].standardAnswer;
      this.userAnswer = this.subjectivityQuestionlist[0].userAnswer;
      this.questionScore = this.subjectivityQuestionlist[0].questionScore;
      this.realScore = this.subjectivityQuestionlist[0].realScore;
      this.questionImgUrl = require("@/assets/temp/test-question-1.jpg");
      // AI评分结果
      this.scoreGptAnswer = {
        answerScore: 0,
        answerExplain: "",
      };
    },
    addScore() {
      if (this.realScore >= this.questionScore) {
        return;
      }
      this.realScore = this.realScore + 1;
    },
    minusScore() {
      if (this.realScore <= 0) {
        return;
      }
      this.realScore = this.realScore - 1;
    },
    beforQuestion() {
      this.$notify({
        title: "上一题",
        message: "切换至上一道题",
        type: "info",
        duration: 1000,
      });
    },
    nextQuestion() {
      this.$notify({
        title: "下一题",
        message: "切换至下一道题",
        type: "info",
        duration: 1000,
      });
    },
    submitScroe() {
      this.$message({
        type: "success",
        message: "得分已保存成功!",
      });
    },
    getGptScroe() {
      this.loading = true;
      getGptAnswer(this.standardAnswer, this.userAnswer)
        .then((response) => {
          this.scoreGptAnswer = response.data;
          this.questionScore = this.scoreGptAnswer.answerScore;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 主观题表格行点击事件
    subjectClick(row, event, column) {
      console.log(row);
      this.standardAnswer = row.standardAnswer;
      this.userAnswer = row.userAnswer;
      this.questionScore = row.questionScore;
      this.realScore = row.realScore;
      this.questionImgUrl = require("@/assets/temp/" + row.questionImgUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(87vh);
  .score-title {
    height: 5%;
    .title-card {
      margin-left: 30px !important;
    }
  }
  .score-content {
    height: 90%;
    .question-col {
      height: 100%;
    }
  }
}
.el-card {
  margin: 5px 0 5px 0;
  ::v-deep .el-card__body {
    height: 100%;
    width: 100%;
  }
}

::v-deep .el-tabs__content {
  height: 100%;
  .el-tab-pane {
    height: 78%;
    .el-tabs__content {
      height: 100%;
    }
  }
}

.left {
  padding: 0 0 0 20px;
  height: 100%;
  .question-card {
    height: 60%;
  }
  .answer-card {
    height: 37%;
  }
  .boader-text {
    border: 5px solid #409eff;
  }
}

.right {
  padding: 0 20px;
  margin-left: 0px;
  height: 98%;
  .answer-score {
    height: 36%;
    .el-row {
      height: 30%;
    }
    .btn-group {
      height: 30%;
    }
  }
  .answer-explain {
    height: 60%;
    ::v-deep .el-textarea__inner {
      height: 100%;
    }
  }

  .gradient {
    /* 设置容器尺寸 - 原理1 */
    width: 400px;
    height: 400px;
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-45deg, #f0dad3, #f5dde6, #c8e3ec, #cfece5);
    /* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
    animation: gradientBG 5s ease infinite;
  }

  /* 动画，控制背景 background-position */
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

.answer-input {
  height: 100%;
  ::v-deep .el-textarea__inner {
    height: 100%;
    font-size: 13px !important;
    color: #409eff !important;
  }
}

.title-text {
  margin: 0 20px 0 0;
  font-size: 16px !important;
  font-weight: 600;
}

.tip-text {
  color: rgb(29, 28, 28);
  text-align: center;
  font-size: 15px;
}
.score-text {
  color: #f56c6c;
  text-align: right;
  font-size: 35px;
  font-style: oblique;
  position: relative;
  top: -3px;
}
.color-success {
  color: #67c23a;
}
.color-fail {
  color: #f56c6c;
}
.main-icon {
  font-size: 16px;
  font-weight: bold !important;
}
</style>
